﻿@model Drempelvrij.Models.JSON.Wrapper

@section JavaScript
{
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script language="javascript" type="text/javascript">
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        function InitializeMap() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var latlng = new google.maps.LatLng(51.92479, 4.469833);
            var myOptions =
            {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);

            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById('route'));

            var control = document.getElementById('google-map-container');
            control.style.display = 'block';

            google.maps.event.addListener(directionsDisplay, 'routeindex_changed', function () {
                updateMetaData(this.routeIndex);
            });

            calcRoute();
        }

        function calcRoute() {

            var start = @Html.Raw(Model.vanSerialized);
            var end = @Html.Raw(Model.naarSerialized);
            var region = 'nl';

            var request = {
                origin: start,
                destination: end,
                provideRouteAlternatives: true,
                travelMode: google.maps.DirectionsTravelMode.WALKING,
                unitSystem: google.maps.UnitSystem.METRIC,
                avoidHighways: true,
                avoidTolls: true,
                region: region
            };
            directionsService.route(request, function (response, status) {

                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);

                    setTimeout(function(){
                        getHighestAverageRouteIndex();
                    }, 500);
                    
                }
            });
        }

        function updateMetaData(routeIndex)
        {
            var routeidlbl = document.getElementById('lblrouteid');
            var lblwaarde = document.getElementById('lblwaarde');
            var lblsoorten = document.getElementById('lblsoorten');
            var lblnotfound = document.getElementById('lblnotfound');
            
            $.post("/home/postAjax",{routeid: routeIndex},function(result){
                routeidlbl.innerHTML = "Route nummer: " + result["routeid"];
                
                if(result["gemiddeldeWaarde"] == 1)
                {
                    lblwaarde.innerHTML = "Toegankelijkheid wegen: " + "<br><br><img src='../../Content/images/green.png' alt='Goed toegankelijke route' title='Goed toegankelijke route' />" + "<br /><br />";
                }
                if(result["gemiddeldeWaarde"] == 2)
                {
                    lblwaarde.innerHTML = "Toegankelijkheid wegen: " + "<br><br><img src='../../Content/images/orange.png' alt='Redelijk roegankelijke route' title='Redelijk toegankelijke route' />" + "<br /><br />";
                }
                if(result["gemiddeldeWaarde"] == 3)
                {
                    lblwaarde.innerHTML = "Toegankelijkheid wegen: " + "<br><br><img src='../../Content/images/red.png' alt='Slecht Toegankelijke route' title='Slecht Toegankelijke route' />" + "<br /><br />";
                }
                if(result["gemiddeldeWaarde"] == 4)
                {
                    lblwaarde.innerHTML = "Toegankelijkheid wegen: " + "<br><br><img src='../../Content/images/red.png' alt='Slecht Toegankelijke route' title='Slecht Toegankelijke route' />" + "<br /><br />";
                }
                
                lblsoorten.innerHTML = "<b>Soorten bestrating in de route:</b> " + result["soortenbestrating"];               

                var truefalse;

                if(result["streetNotFoundInDB"] === true){
                    truefalse = "Ja";
                }else{
                    truefalse = "Nee";
                }

                lblnotfound.innerHTML = "<br>Is er voor een straat geen bestrating data aanwezig: " + truefalse;
            });
        }

        function getHighestAverageRouteIndex()
        {
            $.ajax({
              type: "POST",
              url: "/home/postAjaxHighestNumber",
              success: function(result){
                directionsDisplay.setRouteIndex(result);
              }
            });
        }

        window.onload = InitializeMap;
    </script>
}

@{
    ViewBag.Title = "Rotterdam Drempelvrij - Show Route";
}

<h1 class="page-title">Welkom</h1>

<div id="google-map-container">
    <div id="map"></div>
</div>

<div id="metadata-container">
    <div id="metadata">
        <p>
        <label id="lblrouteid">Ons excuses, er is geen route gevonden.</label> 
        </p>
        <p>
        <label id="lblwaarde"></label>
        </p>
         <input type="button" id="meer-info-button" value="Meer info" />
        <div id="bestrating" style="display: none;">
            <p>
            <label id="lblsoorten"></label> 
            </p>
            <p>
            <label id="lblnotfound"></label>
            </p>
        </div>
    </div>
    <div id="route"></div>
</div>

<script>
    $("#meer-info-button").click(function () {
        $("#bestrating").toggle("slow");
    });
</script>